Perf: Lazy-load secondary pages and the Leaflet map #59
+37
−11
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Load the detail and submit pages with React.lazy, so only the landing page is in the first download. Lazy-load the map in the result list too, with a placeholder of the same size, so the text of the results renders before Leaflet arrives. JavaScript needed before the first render goes from 636.65 kB (196.43 kB gzip) to 464.62 kB (143.93 kB gzip), and the Vite warning about chunks over 500 kB is gone. The landing page still fetches Leaflet (49.92 kB gzip) for the map thumbnails, but after first render. Refs #55 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
6 tasks
|
@thortve could you resolve the merge conflict. I will review after. |
…er-downloads-on-the-first-page-load
The merge kept the older test body, which rendered SightingList without totalCount and the paging props that main now requires, so the test threw on totalCount.toLocaleString. Use the renderList helper from main and keep waiting for the lazy-loaded map. Refs #55 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign in
to join this conversation on GitHub.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Load the detail and submit pages with React.lazy, so only the landing page is in the first download. Lazy-load the map in the result list too, with a placeholder of the same size, so the text of the results renders before Leaflet arrives.
JavaScript needed before the first render goes from 636.65 kB (196.43 kB gzip) to 464.62 kB (143.93 kB gzip), and the Vite warning about chunks over 500 kB is gone. The landing page still fetches Leaflet (49.92 kB gzip) for the map thumbnails, but after first render.
Refs #55